<template>
  <div ref="popW">
    <div class="popContent">
      <div class="font-lan-l mb-3">
        天气详情
      </div>
      <!-- <el-scrollbar> -->
        <el-row :gutter="8">
          <el-col :span="24" class="mb-1">
            <span class="description">天气：</span
            ><span class="font-lan-m">{{
              data.text ? data.text : "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="24" class="mb-1">
            <span class="description">时间：</span
            ><span class="font-lan-m">{{
              data.createTime ? data.createTime : "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">温度：</span
            ><span class="font-lan-m">{{
              data.temperature ? data.temperature +'℃' : "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">体感温度：</span
            ><span class="font-lan-m">{{
              data.feelsLike ? data.feelsLike +'℃': "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">风向：</span
            ><span class="font-lan-m">{{
              data.windDirection ? data.windDirection : "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">风速：</span
            ><span class="font-lan-m">{{
              data.windSpeed ? data.windSpeed +'m/s': "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">降雨量：</span
            ><span class="font-lan-m">{{data.precip}}mm</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">湿度：</span
            ><span class="font-lan-m">{{
              data.humidity ? data.humidity +'%' : "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">气压：</span
            ><span class="font-lan-m">{{
              data.pressure ? data.pressure +'pa' : "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">经度：</span
            ><span class="font-lan-m">{{
              data.longitude ? parseFloat(data.longitude).toFixed(6): "暂无数据"
            }}</span>
          </el-col>
          <el-col :span="12" class="mb-1">
            <span class="description">纬度：</span
            ><span class="font-lan-m">{{
              data.latitude ? parseFloat(data.latitude).toFixed(6): "暂无数据"
            }}</span>
          </el-col>
        </el-row>
      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
  watch,
} from "vue";
import moment from 'moment'

// 声明类型
const PropsType = {
  data: {
    type: Object,
    default: {},
    require: true,
  },
} as const;
export default defineComponent({
  props: PropsType,
  components: {},
  setup(props) {
    //变量
    const colors = reactive({
      5: "#67c23a",
      4: "#409eff",
      3: "#e6a23c",
      2: "#f56c6c",
      1: "#99A9BF",
    });
    // 生命周期
    onMounted(() => {
      //
    });

    onUnmounted(() => {
      //
    });

    watch(
      () => props.data,
      (val: any) => {
        //
        
      },
      {
        immediate: true,
        deep: true,
      }
    );

    //methods
    const getType = (data) => {
      let type = null;
      switch (data) {
        case "优秀":
          type = "success";
          break;
        case "良好":
          type = "";
          break;
        case "中等":
          type = "warning";
          break;
        case "较差":
          type = "danger";
          break;
        case "极差":
          type = "info";
          break;
      }
      return type;
    };

    // return
    return {
      colors,
      getType,
      moment
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.popContent {
  color: #fff;
  .description {
    font-size: 14px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    line-height: 16px;
    -webkit-background-clip: text;
  }
}
</style>
